iT邦幫忙

2023 iThome 鐵人賽

DAY 21
0
自我挑戰組

Rayeee 的 TypeScript 的學習日記系列 第 21

<20230922> Day 21. <TS 專案 05> 開始進入 class + 來讀個文件吧

  • 分享至 

  • xImage
  •  

回憶需求可以參考 Day 16. 來做個 TypeScript 專案吧

昨天我們為了在 TypeScript 專案中使用 Google Maps 模組,引入了 Google Maps 的 Type definition file,讓 TypeScript 得以識別裡面的型別。

今天我們就來開始建立一開始規劃的三個檔案 Map.ts, User.ts, Company.ts ,並在 index.ts 引入他們吧


今日重點:

  • 建立主要的 ts 文件
  • 使用 google map 模組,閱讀 Type definition file 文件

目前規劃的專案結構:

// project folder
    L src/
       L User.ts
       L Company.ts
       L Map.ts
       L index.ts

建立單個類別的 ts 文件

前面有提到在 TypeScript 中,通常會把不同的類別 (class) 單獨規劃在一個文件中並獨立導出,要使用時再引用並建立實體

這邊先初步的建立 User.ts 以及 Company.ts

// Company.ts
class Company {
  companyName: string;
  catchPhrase: string;
  location: { 
    lat: number;
    lng: number;
  };
  constructor(
    companyName: string,
    catchPhrase: string,
    lat: number,
    lng: number
  ) {
    this.companyName = companyName;
    this.catchPhrase = catchPhrase;
    this.location = {
      lat: lat,
      lng: lng,
    };
  }
}
// User.ts
class User {
  name: string;
  age: number;
  location: {
    lat: number;
    lng: number;
  };
  constructor(
    name: string, 
    age: number, 
    lat: number, 
    lng: number
  ) {
    this.name = name;
    this.age = age;
    this.location = {
      lat: lat,
      lng: lng,
    };
  }
}

兩個 class 都有各自的屬性,以及一個相同、為了在 Google Maps 上標記自己經緯座標的屬性 location

Map.ts

接下來來建立 Map.ts,在 Map.ts 中,我們會使用前面引入的 Google Maps Library

在昨天引入 Google Maps 的 Type definition file 之後,現在我們可以直接地在檔案中使用 google,滑鼠移到上面就可以看見 namespace google

https://ithelp.ithome.com.tw/upload/images/20230922/201625447r9DhdfWA3.png

這時按 ctrl 鍵點下去或是按 F12,就會跳轉到我們引入的 Google Maps JavaScript SDK Type definition file @types/google.maps/index.d.ts

https://ithelp.ithome.com.tw/upload/images/20230922/201625448o12UanyrJ.png

這個文件除了給 TypeScript 之外,也是我們使用這個 Library 的一個說明書

上圖 21 行的地方,就是在告訴 TypeScript 我們現在有個全域變數叫做 google,這個變數有個屬性 maps,在這個 maps 屬性上有一大堆其他不同的屬性。

這時我們可以下 ctrl + P => >fold level 2,意思是把程式碼兩層以上的都摺疊起來

現在比較清楚的看到 google.maps 上的各式各樣的屬性

https://ithelp.ithome.com.tw/upload/images/20230922/201625446OBwK6d97I.png

這邊我們主要要用到功能是建立一個地圖顯示在瀏覽器上,我們會需要其中的 Map 屬性,可以看到 Map 是一個 class,我們可以創建這個類別的實例,用來放在瀏覽器上顯示地圖

https://ithelp.ithome.com.tw/upload/images/20230922/20162544pTd4S4c8E4.png

這邊可以看一下文件中的說明該如何使用 class Map
前面有提到使用 class 的時候,會自動調用 constructor() 並且需要傳入必要的初始化參數,這邊文件就有寫到需要傳入兩個參數:一個是 mapDiv 參數,並且它型別是 HTMLELement;一個是 opts 參數,型別為 MapOptions

https://ithelp.ithome.com.tw/upload/images/20230922/20162544ggjhTE8Kt9.png

文件上的意思就是說我們要創建 class Map 的實例的話,我們就需要傳入一個 type HTMLELement 的參數

意思其實就是要在瀏覽器中呈現地圖的位置

而第二個參數 opts?: google.maps.MapOptions,參數後面有個 ? 就代表它是可選屬性

我們先來在 index.ts 檔案中創建 class Map 實例試試

new google.maps.Map()

https://ithelp.ithome.com.tw/upload/images/20230922/20162544vQa9z1cTr5.png

可以看到 TypeScript 有提醒我們如同 Type definition file 所寫的要傳入 mapDiv: HTMLElement 參數的提示

// index.html
<html>
<body>
  <div id="map" style="height: 100%;"></div>
  <script src="https://maps.googleapis.com/maps/api/js?key=<yourAPIKey>"></script>
  <script src="./src/index.ts"></script>
</body>
</html>
// index.ts
new google.maps.Map(document.getElementById("map"));

這時會發現報錯

意思是第一個參數只能接受 HTMLElement type 的參數,不能接受 HTMLElement | null type 的參數,這也是剛學習 TypeScript 時常常讓我沮喪的地方,檢查得太仔細了...

https://ithelp.ithome.com.tw/upload/images/20230922/20162544kQVQz1jZLo.png

我們可以先用應急的方式處理,後面加上 as HTMLElement
這是 TypeScript 的型別斷言,意思是強制告訴 TypeScript 這個參數就會是這個 type

// index.ts
new google.maps.Map(document.getElementById("map") as HTMLElement);

接下來要傳入第二個參數 google.maps.MapOptions

https://ithelp.ithome.com.tw/upload/images/20230922/201625442jP2hiKCjm.png

一樣按 F12 之後可以看到定義 MapOptions interface 的地方

https://ithelp.ithome.com.tw/upload/images/20230922/20162544sbaErzTTmr.png

,這個參數其實就是地圖的各種屬性,專案中會需要的是 zoomcenter 屬性

zoom 代表縮放倍率

https://ithelp.ithome.com.tw/upload/images/20230922/20162544D05koZaJXL.png

center 代表中心位置,可以傳入 interface LatLngLiteral 的型別,再對 LatLngLiteralF12 檢視定義,可以看到是由經緯度 lat, lng 組成

https://ithelp.ithome.com.tw/upload/images/20230922/20162544vuLZQG4iWr.png

再將我們要建立的實體 class Map 依照文件 Type definition file 設定的參數,會如下程式碼:

// index.ts
new google.maps.Map(document.getElementById("map") as HTMLElement, {
  zoom: 1,
  center: {
    lat: 0,
    lng: 0,
  },
});

再執行 percel index.html 可以看到 googel maps 出現在瀏覽器上了

https://ithelp.ithome.com.tw/upload/images/20230922/20162544EbqM8qeuQX.png

以上是今天的內容,明天會把 google maps 放進 Map.ts 裡面,並且在 index.ts 引入三個主要 class


上一篇
<20230921> Day 20. <TS 專案 04> Type definition file
下一篇
<20230923> Day 22. <TS 專案 06> 完善所有的 class 吧
系列文
Rayeee 的 TypeScript 的學習日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言